import React, { useEffect } from 'react';
import { connect } from 'umi';

import { TradeType } from '@/pages/ETrade/MediumAndLongTermMarket/constant.js';
import { TRDefault } from '@/components';

import Operate from '../Operate';
import CentralizedEcharts from '../CentralizedEcharts';
import CentralizedTable from '../CentralizedTable';
import RollingEcharts from '../RollingEcharts';
import RollingTable from '../RollingTable';
import styles from './index.less';

export const HistorySeqPrice = (props) => {
  // 获取省份列表
  useEffect(() => {
    // props.fetchProvincesEffect();
  }, []);

  return (
    <div className={styles.HistorySeqPrice}>
      <Operate />
      {props.dataTradeType === TradeType.CENTRALIZED.value ? (
        <>
          {props.centralizedChartData ? (
            <>
              <div className={styles.title}>
                <span className={styles.text}>序列出清量价信息</span>
                <div className={styles.unit}>
                  <span className={styles.label}>单位(量：</span>MWh{' '}
                  <span className={styles.label}>价：</span>元/MWh
                  <span className={styles.label}>)</span>
                </div>
              </div>
              <CentralizedEcharts />
              <CentralizedTable />
            </>
          ) : (
            <TRDefault type="emptysm" />
          )}
        </>
      ) : (
        <>
          {props.rollingChartData ? (
            <>
              <div className={styles.title}>
                <span className={styles.text}>序列出清量价信息</span>
                <div className={styles.unit}>
                  <span className={styles.label}>单位(量：</span>MWh{' '}
                  <span className={styles.label}>价：</span>元/MWh
                  <span className={styles.label}>)</span>
                </div>
              </div>
              <RollingEcharts />
              <RollingTable />
            </>
          ) : (
            <TRDefault type="emptysm" />
          )}
        </>
      )}
    </div>
  );
};

const mapStateToProps = ({ mediumAndLongTermMarket }) => ({
  dataTradeType: mediumAndLongTermMarket.dataTradeType,
  centralizedChartData: mediumAndLongTermMarket.centralizedChartData,
  rollingChartData: mediumAndLongTermMarket.rollingChartData,
});

const mapDispatchToProps = (dispatch) => {
  return {
    fetchProvincesEffect: () => dispatch({ type: 'mediumAndLongTermMarket/fetchProvincesEffect' }),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(HistorySeqPrice);
